<template>
  <div class="shai">
    <mt-header fixed title="晒一晒">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div style="height: .6rem"></div>
    <div class="shai-list"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="isMoreLoading"
      infinite-scroll-distance="10"
      :infinite-scroll-immediate-check="true"
    >
      <div class="shai-item" v-for="(item, index) of list" :key="item.id">
        <div class="shai-tit">
          <img class="shai-tit-img" src="static/icon/shaishai.png" alt="">
          <p>{{item.name}}</p>
        </div>
        <div class="shai-warpper">
          <div  class="shai-warpper-img" v-for="(list, num) of item.imgArray" :key="num">
            <img class="shai-warpper-imgitem" :src="list">
          </div>
        </div>
        <div class="shai-bottom">
          <span>{{item.createDate}}</span>
          <span v-show="item.isFabulous" class="like" @click="clickHandleLink(item.id,index,item.isFabulous)"><img src="static/img/likes.png">取消</span>
          <span v-show="!item.isFabulous" class="like" @click="clickHandleLink(item.id,index,item.isFabulous)"><img src="static/img/like.png">点赞</span>
        </div>
      </div>
    </div>
    <div class="loading-box tc" v-if="isLoading">
      <mt-spinner :size="40" type="fading-circle" class="loading-more"></mt-spinner>
      <span class="loading-more-txt">加载中...</span>
    </div>
    <div class="no-more" v-if="noMore">没有更多了~</div>
    <div style="height: .98rem"></div>
    <public-menu></public-menu>
  </div>
</template>

<script>
import PublicMenu from '../public/Menu'
import axios from 'axios'
export default {
  name: 'Shai',
  components: {
    PublicMenu
  },
  data () {
    return {
      list: [],
      isLoading: false, // 加载中转菊花
      isMoreLoading: true, // 加载更多中
      noMore: false, // 是否还有更多
      pageInfo: { // 分页信息
        page: 1,
        pageSize: 5,
        total: 0, // 总条数
        totalPage: 1 // 总分页数
      },
      isTrue: true,
      shaiData: [{
        id: '001',
        title: '推广员01',
        imgList: [
          '/static/img/text.jpg',
          '/static/img/text2.jpg',
          '/static/img/text.jpg',
          '/static/img/text2.jpg',
          '/static/img/text.jpg',
          '/static/img/text2.jpg'
        ],
        touxiang: '/static/img/tx.jpg',
        isLink: false
      }, {
        id: '002',
        title: '推广员02',
        imgList: ['/static/img/text2.jpg', '/static/img/text.jpg', '/static/img/text2.jpg', '/static/img/text.jpg', '/static/img/text.jpg'],
        touxiang: '/static/img/tx.jpg',
        isLink: true
      }, {
        id: '003',
        title: '推广员33',
        imgList: ['/static/img/text.jpg', '/static/img/text2.jpg', '/static/img/text.jpg', '/static/img/text2.jpg'],
        touxiang: '/static/img/tx.jpg',
        isLink: true
      }]
    }
  },
  methods: {
    getInfo (type) {
      this.isLoading = true
      axios.get('/meimai/interface/show/list', {
        params: {
          'memberId': this.$store.state.userId,
          'pageSize': this.pageInfo.pageSize,
          'page': this.pageInfo.page
        }
      }).then((res) => {
        let datas = res.data
        if (datas.code === 0) {
          if (type === 'loadMore') {
            this.list = this.list.concat(datas.data.array)
          } else {
            this.list = datas.data.array
          }
          this.pageInfo.total = datas.data.total
          this.pageInfo.totalPage = datas.data.totalPage
        }
        this.isLoading = false
        this.isMoreLoading = false
      })
    },
    loadMore () {
      this.pageInfo.page += 1 // 增加分页
      this.isMoreLoading = true // 设置加载更多中
      this.isLoading = true // 加载中
      if (this.pageInfo.page > this.pageInfo.totalPage) { // 超过了分页
        this.noMore = true // 显示没有更多了
        this.isLoading = false // 关闭加载中
        return false
      }
      // 做个缓冲
      setTimeout(() => {
        this.getInfo('loadMore')
      }, 100)
    },
    clickHandleLink (id, index, datas) {
      datas = !datas
      axios.get('/meimai/interface/show/appreciate', {
        params: {
          'memberId': this.$store.state.userId,
          'showId': id,
          'isFabulous': datas
        }
      }).then((res) => {
        // console.log(res)
        // this.getInfo()
        this.list[index].isFabulous = datas
        this.$set(this.list, index, this.list[index])
      })
      // this.shaiData[index].isLink = !datas
      // this.$set(this.shaiData, index, this.shaiData[index])
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style lang="stylus" scoped>
.mint-header
  background: #ec2935
.shai
  background: #fff
  .shai-list
    margin: .3rem
    .shai-item
      .shai-tit
        display: flex
        justify-content: space-start
        align-items: center
        font-size: .3rem
        font-weight: 700
        margin-top: .3rem
        .shai-tit-img
          width: 1.1rem
          height: 1.1rem
          border-radius: 50%
          margin-right: .3rem
      .shai-warpper
        padding: .3rem 0 .1rem
        text-align: center
        overflow: hidden
        .shai-warpper-img
          width: 33.3333%
          float: left
          margin: 0 auto
          height: 0
          padding-bottom: 23%
          overflow: hidden
          .shai-warpper-imgitem
            padding: .05rem
            width: 100%
            height: auto
            box-sizing: border-box
      .like
        img
          width: .3rem
          height: .3rem
          margin-left: .1rem
          padding-right: .1rem
      .shai-bottom
        width: 100%
        display: flex
        justify-content: space-between
  .no-more,
    .loading-box
      text-align: center
      line-height: 1rem
      .loading-more
        display: flex
        justify-content: center
</style>
